<template>
	<div>
		<div>
			<el-button @click="addDialog = true">添加公告</el-button>
		</div>
		<el-table :data="tableData.records">
			<el-table-column prop="title" label="公告标题" width="120" />
			<el-table-column prop="publisher" label="发布人" width="120" />
			<el-table-column prop="content" label="发布内容" width="120" />
			<el-table-column prop="createTime" label="发布时间" width="220" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>
					<el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			style="margin-bottom: 20px"
			background
			layout="prev, pager, next"
			:page-count="tableData.pages"
			v-model:current-page="tableData.page"
			@update:current-page="loadData"
		/>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="editDialog"
			title="修改"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="公告标题">
					<el-input v-model="formData.title" />
				</el-form-item>
				<el-form-item label="发布人">
					<el-input v-model="formData.publisher" />
				</el-form-item>
				<el-form-item label="公告内容">
					<el-input v-model="formData.content" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="edit">更新</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			v-model="addDialog"
			title="新增公告"
			width="30%"
			:before-close="resetForm"
		>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="公告标题">
					<el-input v-model="formData.title" />
				</el-form-item>
				<el-form-item label="发布人">
					<el-input v-model="formData.publisher" />
				</el-form-item>
				<el-form-item label="公告内容">
					<el-input v-model="formData.content" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="add">新增</el-button>
					<el-button @click="resetForm">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useUserStore } from "@/stores/userStores";
import { deletedAnnounce, getAnnounceById, getAnnouncePage, saveAnnounce, updateAnnounce } from "@/api/announce";

const tableData = reactive({
	records: [],
	pages: 0,
	page: 1,
	size: 10,
});
const formData = ref({});

const userStore = useUserStore();
const token = userStore.token;
const editDialog = ref(false);
const addDialog = ref(false);

const openEdit = async (id) => {
	const res = await getAnnounceById(id);
	if (res.success) {
		formData.value = res.data;
		editDialog.value = true;
	} else {
		ElMessage.error(res.msg);
	}
};
const edit = async () => {
	const res = await updateAnnounce(formData.value);
	if (res.success) {
		ElMessage.success("修改成功");
	} else {
		ElMessage.error(res.msg);
	}
	editDialog.value = false;
	resetForm();
	loadData();
};

const add = async () => {
	const res = await saveAnnounce(formData.value);
	if (res.success) {
		ElMessage.success("添加成功");
	} else {
		ElMessage.error(res.msg);
	}
	addDialog.value = false;
	resetForm();
	loadData();
};
const deleted = async (id) => {
	ElMessageBox.confirm("确认要删除该公告?", "Warning", {
		confirmButtonText: "确认",
		cancelButtonText: "取消",
		type: "warning",
	}).then(async () => {
		const res = await deletedAnnounce(id);
		if (res.success) {
			ElMessage.success("删除完成");
		} else {
			ElMessage.error(res.msg);
		}
		loadData();
	});
};
const resetForm = () => {
	if (addDialog.value) {
		addDialog.value = false;
	}
	if (editDialog.value) {
		editDialog.value = false;
	}
	formData.value = {};
};

const loadData = async () => {
	const res = await getAnnouncePage({
		page: tableData.page,
		size: tableData.size,
	});
	if (res.success) {
		tableData.records = res.data.list;
		tableData.page = res.data.pageNum;
		tableData.pages = res.data.pages;
	}
};

onMounted(() => {
	loadData();
});
</script>

<style scoped></style>
